<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
    <script src="./vue.js"></script>
</head>
<body>
<div>
    <div>
        <h2 style="text-align: center;">ToDoList</h2>
    </div>
</div>
<div class="main" style="text-align: center;">
    <span>添加任务：</span>
    <input
            placeholder="提示：+回车即可添加任务"
            type="text"
           v-on:keyup.enter="enterFn"
            v-model="todo"
    />
    <ul>
        <li style="list-style-type:none;">还有{{unComplete}}个任务未完成</li>
        <li style="list-style-type:none;">
            <a :class="{active:visibility!=='unCompleted'&&visibility!=='completed'}" href="#all">所有的任务</a>
            <a :class="{active:visibility==='unCompleted'}" href="#unCompleted">未完成的任务</a>
            <a :class="{active:visibility==='completed'}" href="#completed">已完成的任务</a>
        </li>
    </ul>
    <h3 >任务列表：</h3>
    <div>
 
        <span v-show="!list.length">还没有添加任何任务</span>
        <ul v-show="list.length">
            <li 
			    style="list-style-type:none;"
                v-for="item in filterData"
                v-bind:class="{completed:item.isComplete,editing:item===edtorTodos}"
            >
                <div>
                    <input 
                           type="checkbox"
                           v-model="item.isComplete"
                    />
                    <label @dblclick="edtorTodo(item)">{{item.title}}</label>
                    <button
                            @click="delFn(item)"
                    ></button>
                </div>
                <input
                        type="text"
                        v-focus="edtorTodos===item"
                        v-model="item.title"
                        @blur="edtoEnd(item)"
                        @keyup.enter="edtoEnd(item)"
                        @keyup.esc="cancelEdit(item)"
                />
            </li>
        </ul>
    </div>
</div>
<script src="./todo.js"></script>
</body>
</html>